<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画</title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            .big{
                width: 600px;
                height: 500px;
                border:1px solid blue;
                position: absolute;
                top: 0;left:0;
                bottom:0;right:0;
                margin: auto;
            }
            .small{
                width:100px;
                height:100px;
                background: pink;
                transition: all 1s;
                /*调用动画 */
                /* animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
                animation: mymove 4s linear infinite;/*linear：匀速  infinite:循环*/
            }
            @keyframes mymove{
                0%{
                    transform: translate(0,0);
                }
                25%{
                    transform: translate(500px,0);
                }
                50%{
                    transform: translate(500px,400px);
                }
                75%{
                    transform: translate(0,400px);
                }
                100%{
                    transform: translate(0,0);
                }
            }
            .three{
                width:100px;
                height:100px;
                background: purple;
                transition: all 1s;
                position: absolute;
                animation: mymoves 4s linear infinite;/*linear：匀速  infinite:循环*/
            }
            @keyframes mymoves {
                0%{
                    right: 0;
                    bottom: 0;
                }
                25%{
                    left: 0;
                    bottom: 0;
                }
                50%{
                    left: 0;
                    top:0;
                }
                75%{
                    right:0;
                    top:0;
                }
                100%{
                    right: 0;
                    bottom: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="big">
            <div class="small"></div>
            <div class="three"></div>
        </div>
    </body>
</html>